<template>
	<view class="content">

		<status-bar></status-bar>

		<view class="top">
			<view class="logo">
				<image class="logo" :src="logo"></image>
			</view>

			<view class="search">
				<!-- <uni-search-bar class="search-bar" clearButton="none" cancelButton="none" :radius="100" placeholder="搜索"
					@focus="toExplore">
				</uni-search-bar> -->
				<u-search placeholder="踏星" disabled @click="toExplore" :showAction="false" class="search-bar">
				</u-search>
			</view>

			<view class="img">
				<image class="img" :src="userInfo?userInfo.img:userImg" @click="toProfile()"></image>
			</view>

			<view class="img">
			</view>
		</view>


		<view class="tab">
			<tab-bar :title-list="tabsList" @change="tabChange">
				<!-- 推荐 -->
				<tab-bar-item slot="0" @onRefresh="onCommandRefresh" :freshing="commandRefresing">
					<view style="width: 100%; display: flex;flex-direction: column;align-items: center;">
						<block v-for="(item,index) in list">
							<view class="card">
								<!-- <book-card v-bind="item.t" :tags="[item.t.state,item.t.classify,item.t.id]"
									:is-link="true" :link="'/pages/contents/contents?id=' + item.t.id" type="nav-card"
									:key="index" @read="read">
								</book-card> -->

								<!-- #ifdef APP-PLUS || H5-->
								<book-card v-bind="item.t" :tags="[item.t.state,item.t.classify,item.t.id]"
									:is-link="true" :link="'/pages/contents/contents?id=' + item.t.id" type="nav-card"
									:key="index" @read="read" :card-id="item.t.id">
								</book-card>
								<!-- #endif -->

								<!-- #ifdef MP -->
								<book-card :tags="[item.t.state,item.t.classify,item.t.id]" :name="item.t.name"
									:author="item.t.author" :card-id="item.t.id" :img="item.t.img"
									:sourceSite="item.t.sourceSite" :synopsis="item.t.synopsis" :is-link="true"
									:link="'/pages/contents/contents?id=' + item.t.id" type="nav-card" :key="index"
									@read="read">
								</book-card>
								<!-- #endif -->
							</view>
						</block>
					</view>
				</tab-bar-item>

				<!-- 起点 -->
				<tab-bar-item slot="1" :refresherEnabled="false" bgColor="#ffffff">
					<view class="tab_page">
						<view class="box mar">
							<u-swiper :list="qSwiper" keyName="image" showTitle circular></u-swiper>
						</view>

						<show-card class="box mar" title="最新入库" :list="qNewList"></show-card>

						<show-card class="box mar" title="点击排行" :list="qClick" type="vertical"></show-card>

					</view>
				</tab-bar-item>


				<!-- 纵横 -->
				<tab-bar-item slot="2" :refresherEnabled="false" bgColor="#ffffff">
					<view class="tab_page">
						<view class="box mar">
							<u-swiper :list="zSwiper" keyName="image" showTitle circular></u-swiper>
						</view>

						<show-card class="box mar" title="最新入库" :list="zNewList"></show-card>

						<show-card class="box mar" title="点击排行" :list="zClick" type="vertical"></show-card>

					</view>
				</tab-bar-item>


				<!-- 17K -->
				<tab-bar-item slot="3" :refresherEnabled="false" bgColor="#ffffff">
					<view class="tab_page">
						<view class="box mar">
							<u-swiper :list="kSwiper" keyName="image" showTitle circular></u-swiper>
						</view>

						<show-card class="box mar" title="最新入库" :list="kNewList"></show-card>

						<show-card class="box mar" title="点击排行" :list="kClick" type="vertical"></show-card>

					</view>
				</tab-bar-item>
			</tab-bar>
		</view>
	</view>
</template>

<script>
	// import logo from '@/static/logo.png'
	import userImg from '@/static/user.jpg'
	import utils from '@/static/js/utils.js'

	import {
		mapState,
		mapMutations
	} from 'vuex' //引入mapGetters

	export default {
		data() {
			return {
				// img: logo,
				userImg: userImg,
				tabsList: ['推荐', '起点', '纵横', '17K'],

				//推荐

				list: [],
				commandRefresing: false,

				// 起点
				qSwiper: [{
					image: 'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/223638d0f786bfe2d7caf71ac480563e.jpg',
					title: '重生三国从养鸡开始',
				}, {
					image: 'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/2dce5b2088b14619fcff97b30e9d1ccb.jpg',
					title: '神话：天罡地煞'
				}, {
					image: 'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/13e00d56cb24faad0baa64f4d3dd67e9.jpg',
					title: '大理寺卿的日常事'
				}],

				// 最新入库
				qNewList: null,

				// 最热
				qClick: null,



				// 纵横
				zSwiper: [{
					image: 'http://static.zongheng.com/upload/recommend/78/f7/78f78f2ce0c438daaf05e2718408cd4f.jpeg',
					title: '末世吞噬者',
				}, {
					image: 'http://static.zongheng.com/upload/recommend/d8/e6/d8e6245782f8511ada07239941cb19f0.png',
					title: '三世放飞芳菲你'
				}, {
					image: 'http://static.zongheng.com/upload/recommend/f8/24/f8245ff11bbbd191e7c4fe57211b50d8.jpeg',
					title: '大炎不良人'
				}],

				// 最新入库
				zNewList: null,

				zClick: null,


				// 17K

				// 最新入库
				kNewList: null,

				kClick: null,

				kSwiper: [{
					image: 'https://img.17k.com/cmsimg/recommend/2022/03/1647223560.5136.jpg',
					title: '网游：精灵世纪，王者归来',
				}, {
					image: 'https://img.17k.com/cmsimg/recommend/2022/03/1646621207.7936.jpg',
					title: '我有一剑，可斩星，碎月'
				}, {
					image: 'https://img.17k.com/cmsimg/recommend/2021/12/1639967393.5629.jpg',
					title: '师傅说我天生吃阴饭'
				}],
			}
		},
		computed: {
			...mapState([
				'userInfo', "logo"
			])
		},
		onLoad() {
			this.onCommandRefresh()

			this.loadNewList("起点中文网").then(res => {
				if (res.status === 200) {
					this.qNewList = res.data.list
				}
			})
			this.loadNewList("纵横中文网").then(res => {
				if (res.status === 200) {
					this.zNewList = res.data.list
				}
			})
			this.loadNewList("17K小说网").then(res => {
				if (res.status === 200) {
					this.kNewList = res.data.list
				}
			})

			this.rankList("起点中文网", "qClick")
			this.rankList("纵横中文网", "zClick")
			this.rankList("17K小说网", "kClick")
		},
		onShow() {
			console.log("===index onShow===")
			if (!this.userInfo) {
				this.userInfo = utils.globalData.userInfo
			}
		},
		methods: {

			tabChange(tabIndex) {
				switch (tabIndex) {
					// 推荐
					case 0:
						if (!this.list)
							this.onCommandRefresh()
						break
					case 1:
						break

				}

			},
			read(id) {
				uni.navigateTo({
					url: '/pages/contents/contents?id=' + id
				})
			},

			// 加载最新入库小说
			loadNewList(sourceSite) {
				return this.$http.post(`/book/list`, {
					page: 1,
					pageSize: 10,
					sourceSite: sourceSite,
					desc: ["id"]
				})
			},

			scrollClick(id) {
				uni.navigateTo({
					url: '/pages/contents/contents?id=' + id
				})
			},

			toExplore() {
				uni.navigateTo({
					url: "/pages/explore/explore"
				})
			},

			// 推荐下拉刷新
			onCommandRefresh() {
				this.commandRefresing = true
				this.recommand()
			},

			rankList(sourceSite, v) {
				let page = 1
				let pageSize = 3
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()
				let day = date.getDate()
				this.$http.get(`/rank/book/click`, {
					page: page,
					pageSize: pageSize,
					year: year,
					month: month,
					day: day,
					isAsc: false,
					sourceSite: sourceSite
				}).then(res => {
					console.log("===rankList===")
					// console.log(res)
					if (res.status == 200) {
						let list = res.data.list
						let rankList = []
						list.forEach(rankVo => {
							rankList.push(rankVo.t)
						})
						this[v] = rankList
					}
				})
			},

			// 推荐list加载
			recommand() {
				let page = 1
				let pageSize = 5
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()
				let day = date.getDate()

				// console.log("day", day)

				this.$http.get(`/rank/book/click`, {
					page: page,
					pageSize: pageSize,
					year: year,
					month: month,
					day: day,
					isAsc: false
				}).then(res => {
					// console.log(res)
					if (res.status == 200) {
						this.list = res.data.list
					}
				}).finally(e => {
					if (this.commandRefresing)
						this.commandRefresing = false
				})
			},

			toProfile() {
				uni.switchTab({
					url: "/pages/profile/profile"
				})
			}
		}
	}
</script>

<style scoped>
	.pad {
		padding: 20px 20px;
	}

	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab_bar {
		height: var(--window-bottom);
	}

	.top {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-shrink: 0;
		height: 55px;
		/* background-color: #ED716B; */
	}

	.tab {
		flex: 1;
		width: 100%;
	}


	.cover {
		margin-right: 20px;
		width: 40px;
		height: 40px;
	}

	.img {
		width: 30px;
		height: 30px;
		border-radius: 50% 50%;
	}

	.logo {
		width: 40px;
		height: 40px;
		border-radius: 50% 50%;
	}

	.search {
		width: 200px;
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.search-bar {
		width: 200px;
		height: 36px;
		opacity: 0.5;
	}

	.card {
		margin: 10px 0px;
		padding: 15px 10px;
		background-color: white;
		border-radius: 10px;
		width: 90%;
	}

	.tab_page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box {
		width: 95%;
	}

	.mar {
		margin: 10px 0;
	}

	.mar-bot {
		margin-bottom: 10px;
	}

	.card-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.card-more {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}
</style>
